<template>
  <!-- 数据面板：平台数据分析 -->
  <div class="data-panel">
      <el-card class="filter-card">
          <div class="date-filter">
              <el-date-picker
                  v-model="startDate"
                  type="date"
                  placeholder="开始日期"
                  :picker-options="pickerOptions.start"
                  @change="handleDateChange"
              ></el-date-picker>
              <el-date-picker
                  v-model="endDate"
                  type="date"
                  placeholder="结束日期"
                  :picker-options="pickerOptions.end"
                  @change="handleDateChange"
              ></el-date-picker>
              <el-button @click="resetDateFilter" :loading="isLoading">
                  {{ isLoading? '正在重置' : '重置' }}
              </el-button>
          </div>
      </el-card>

      <el-card class="table-card">
          <div class="data-display">
              <div class="data-item">
                  <span class="data-label">成功收养的宠物数量:{{ platformData.successfulAdoptions }}</span>
                  
              </div>
              <div class="data-item">
                  <span class="data-label">平台总用户数量:{{ platformData.totalUsers }}</span>
              
              </div>
              <div class="data-item">
                  <span class="data-label">平台收入:{{ platformData.platformIncome }}</span>
                 
              </div>
              <div class="data-item">
                  <span class="data-label">平台支出:{{ platformData.platformExpenditure }}</span>
           
              </div>
          </div>
      </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const startDate = ref('');
const endDate = ref('');
const isLoading = ref(false);
const errorMsg = ref('');
const platformData = ref({
  successfulAdoptions: 0,
  totalUsers: 0,
  platformIncome: 0,
  platformExpenditure: 0
});

// 日期选择器配置
const pickerOptions = {
  start: {
      shortcuts: false,
      disabledDate(time) {
          if (endDate.value) {
              return time.getTime() > new Date(endDate.value).getTime();
          }
          return false;
      }
  },
  end: {
      shortcuts: false,
      disabledDate(time) {
          if (startDate.value) {
              return time.getTime() < new Date(startDate.value).getTime();
          }
          return false;
      }
  }
};

// 格式化日期为 YYYY-MM-DD 格式
const formatDate = (dateString: string) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 数据请求函数
const fetchPlatformData = async () => {
  isLoading.value = true;
  errorMsg.value = '';

  try {
      const params: Record<string, string> = {};

      const start = formatDate(startDate.value);
      const end = formatDate(endDate.value);

      if (start && end) {
          params.startDate = start;
          params.endDate = end;
      } else if (start || end) {
          // 按照接口要求，startDate和endDate必须同时存在或同时不存在
          throw new Error('开始日期和结束日期必须同时选择或同时不选');
      }

      const response = await axios.get(
          'http://localhost:8080/pet-adopt/admin/dashboard/platform-stats',
          { params }
      );

      platformData.value = response.data;
  } catch (error: any) {
      console.error('获取平台数据失败', error);
      if (error.response) {
          errorMsg.value = `请求失败: ${error.response.status} ${error.response.statusText}`;
      } else if (error.request) {
          errorMsg.value = '没有收到服务器响应';
      } else {
          errorMsg.value = `请求错误: ${error.message}`;
      }
  } finally {
      isLoading.value = false;
  }
};

// 处理日期变化
const handleDateChange = () => {
  fetchPlatformData();
};

// 重置日期筛选
const resetDateFilter = () => {
  startDate.value = '';
  endDate.value = '';
  fetchPlatformData();
};

onMounted(() => {
  fetchPlatformData();
});
</script>

<style scoped lang="scss">
.data-panel {
  padding: 20px;

 .filter-card {
      margin-bottom: 20px;
  }

 .date-filter {
      display: flex;
      gap: 10px;
      align-items: center;
  }

 .table-card {
      margin-bottom: 20px;
      position: relative;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

 .data-display {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 15px;
  }

 .data-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #e0e0e0;
  }

 .data-item:last-child {
      border-bottom: none;
  }

 .data-label {
      flex: 1; // 标签占据剩余空间
      font-weight: bold;
  }
}
</style>